<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/1.css">
</head>

<body>

    <div class="list2">
        <dl>
            <a href="">
                <p>111</p>
            </a>
        </dl>
    </div>

    <ul class="list">
        <li>
            <a href="">
                <h3>标题</h3>
                <p>sass真好用啊</p>
                <span>sass免费啊</span>
            </a>
        </li>
        <li>
            <a href="">
                <h3>标题</h3>
                <p>sass真好用啊</p>
                <span>sass免费啊</span>
            </a>
        </li>
        <li>
            <a href="">
                <h3>标题</h3>
                <p>sass真好用啊</p>
                <span>sass免费啊</span>
            </a>
        </li>
        <li>
            <a href="">
                <h3>标题</h3>
                <p>sass真好用啊</p>
                <span>sass免费啊</span>
            </a>
        </li>
    </ul>

    <script>

        // sass  less    css预处理 、

        //   sass/less 可以允许在css中使用变量，嵌套，函数等语法

        //   sass / less  语法需要编译成css代码

        //   最终页面引入的依然是css文件




        //  编译  ---  相当于一个翻译软件
        //    最早是基于ruby
        //    vscode   安装 easy sass  这个插件    可以自动编译sass文件  自动生成对应的css文件  x.css / x.min.css


        // xxx.scss




        // sass 第一个语法
        //    嵌套
        //    &  需要使用伪类选择器
        //    使用变量
        //       $变量名    不区分中划线和下划线
        //    可以使用算术表达式   + - * /
        

        //    @mixin  相当于是函数

        //    @extend  继承   --- 会继承子孙后代所有的样式
        //       当两个盒子及内容大致一样的时候   才使用继承


        //    引入其他的scss文件
        //        @import '文件名'    可以省略后缀

    </script>

</body>

</html>